<template>
  <div class="block-settings">
    <!-- 头部栏 -->
    <HeaderComponent 
      :isLoggedIn="isLoggedIn"
      :userInfo="userInfo"
      :showUserPanel="showUserPanel"
      @open-login="$emit('open-login')"
      @toggle-user-panel="$emit('toggle-user-panel')"
      @logout="$emit('logout')"
    />
    
    <!-- 主布局 -->
    <div class="main-layout">
      <!-- 左侧设置导航栏 -->
      <aside class="settings-sidebar">
        <div class="sidebar-header">
          <h3>设置</h3>
        </div>
        <ul class="settings-nav">
          <li class="nav-item">
            <router-link to="/user/settings/profile" class="nav-link">
              <span class="nav-icon">👤</span>
              <span>个人资料</span>
            </router-link>
          </li>
          <li class="nav-item">
            <router-link to="/user/settings/account" class="nav-link">
              <span class="nav-icon">🔐</span>
              <span>账号设置</span>
            </router-link>
          </li>
          <li class="nav-item">
            <router-link to="/user/settings/general" class="nav-link">
              <span class="nav-icon">⚙️</span>
              <span>通用设置</span>
            </router-link>
          </li>
          <li class="nav-item">
            <router-link to="/user/settings/notifications" class="nav-link">
              <span class="nav-icon">🔔</span>
              <span>消息设置</span>
            </router-link>
          </li>
          <li class="nav-item active">
            <router-link to="/user/settings/block" class="nav-link">
              <span class="nav-icon">🚫</span>
              <span>屏蔽管理</span>
            </router-link>
          </li>
          <li class="nav-item">
            <router-link to="/user/settings/tags" class="nav-link">
              <span class="nav-icon">🏷️</span>
              <span>标签管理</span>
            </router-link>
          </li>
        </ul>
      </aside>
      
      <!-- 右侧内容区 -->
      <main class="settings-content">
        <div class="settings-header">
          <h2>屏蔽管理</h2>
          <p>管理您的屏蔽用户和关键词设置</p>
        </div>
      <div class="form-section">
        <h3>屏蔽用户</h3>
        <div class="search-section">
          <div class="search-input">
            <input 
              type="text" 
              v-model="searchUser" 
              placeholder="输入用户名或ID搜索" 
              @keyup.enter="searchUsers"
            />
            <button class="btn-search" @click="searchUsers">搜索</button>
          </div>
        </div>
        
        <div class="blocked-list">
          <div class="list-header">
            <span>已屏蔽用户 ({{ blockedUsers.length }})</span>
            <button class="btn-link" @click="refreshBlockedUsers">刷新</button>
          </div>
          
          <div v-if="blockedUsers.length === 0" class="empty-state">
            <p>暂无屏蔽用户</p>
          </div>
          
          <div v-else class="user-list">
            <div 
              v-for="user in blockedUsers" 
              :key="user.id" 
              class="user-item"
            >
              <div class="user-info">
                <img :src="user.avatar || '/touxiang.jpg'" :alt="user.name" class="user-avatar" />
                <div class="user-details">
                  <div class="user-name">{{ user.name }}</div>
                  <div class="user-id">@{{ user.username }}</div>
                  <div class="block-time">屏蔽时间：{{ formatDate(user.blockedAt) }}</div>
                </div>
              </div>
              <div class="user-actions">
                <button class="btn-unblock" @click="unblockUser(user.id)">
                  取消屏蔽
                </button>
              </div>
            </div>
          </div>
        </div>
      </div>
      
      <div class="form-section">
        <h3>屏蔽关键词</h3>
        <div class="keyword-input">
          <input 
            type="text" 
            v-model="newKeyword" 
            placeholder="输入要屏蔽的关键词" 
            @keyup.enter="addKeyword"
          />
          <button class="btn-add" @click="addKeyword">添加</button>
        </div>
        
        <div class="keyword-list">
          <div class="list-header">
            <span>已屏蔽关键词 ({{ blockedKeywords.length }})</span>
          </div>
          
          <div v-if="blockedKeywords.length === 0" class="empty-state">
            <p>暂无屏蔽关键词</p>
          </div>
          
          <div v-else class="keyword-tags">
            <div 
              v-for="(keyword, index) in blockedKeywords" 
              :key="index" 
              class="keyword-tag"
            >
              <span>{{ keyword }}</span>
              <button class="btn-remove" @click="removeKeyword(index)">
                ×
              </button>
            </div>
          </div>
        </div>
      </div>
      
      <div class="form-section">
        <h3>屏蔽设置</h3>
        <div class="setting-item">
          <div class="setting-info">
            <label>自动屏蔽低质量内容</label>
            <p>系统自动识别并屏蔽可能的垃圾内容</p>
          </div>
          <label class="switch">
            <input type="checkbox" v-model="settings.autoBlockLowQuality" />
            <span class="slider"></span>
          </label>
        </div>
        
        <div class="setting-item">
          <div class="setting-info">
            <label>屏蔽包含敏感词的内容</label>
            <p>自动屏蔽包含敏感词汇的内容</p>
          </div>
          <label class="switch">
            <input type="checkbox" v-model="settings.blockSensitiveContent" />
            <span class="slider"></span>
          </label>
        </div>
        
        <div class="setting-item">
          <div class="setting-info">
            <label>屏蔽广告内容</label>
            <p>自动识别并屏蔽广告推广内容</p>
          </div>
          <label class="switch">
            <input type="checkbox" v-model="settings.blockAds" />
            <span class="slider"></span>
          </label>
        </div>
        
        <div class="setting-item">
          <div class="setting-info">
            <label>屏蔽重复内容</label>
            <p>屏蔽与已看过内容高度相似的重复内容</p>
          </div>
          <label class="switch">
            <input type="checkbox" v-model="settings.blockDuplicateContent" />
            <span class="slider"></span>
          </label>
        </div>
      </div>
      
      <div class="form-section">
        <h3>屏蔽历史</h3>
        <div class="history-stats">
          <div class="stat-item">
            <div class="stat-number">{{ blockHistory.totalBlocked }}</div>
            <div class="stat-label">总屏蔽数</div>
          </div>
          <div class="stat-item">
            <div class="stat-number">{{ blockHistory.thisWeek }}</div>
            <div class="stat-label">本周屏蔽</div>
          </div>
          <div class="stat-item">
            <div class="stat-number">{{ blockHistory.thisMonth }}</div>
            <div class="stat-label">本月屏蔽</div>
          </div>
        </div>
        
        <div class="history-actions">
          <button class="btn-secondary" @click="exportBlockList">
            导出屏蔽列表
          </button>
          <button class="btn-danger" @click="clearAllBlocks">
            清空所有屏蔽
          </button>
        </div>
      </div>
      
      <div class="form-actions">
        <button class="btn-primary" @click="saveSettings">保存设置</button>
        <button class="btn-secondary" @click="resetSettings">恢复默认</button>
        </div>
      </main>
    </div>
  </div>
</template>

<script>
import HeaderComponent from '@/components/HeaderComponent.vue';

export default {
  components: {
    HeaderComponent
  },
  name: 'BlockSettings',
  props: {
    isLoggedIn: {
      type: Boolean,
      default: false
    },
    userInfo: {
      type: Object,
      default: () => ({})
    },
    showUserPanel: {
      type: Boolean,
      default: false
    }
  },
  data() {
    return {
      searchUser: '',
      newKeyword: '',
      blockedUsers: [
        {
          id: 1,
          name: '示例用户1',
          username: 'example1',
          avatar: '/touxiang.jpg',
          blockedAt: new Date('2024-01-15')
        },
        {
          id: 2,
          name: '示例用户2',
          username: 'example2',
          avatar: '/touxiang.jpg',
          blockedAt: new Date('2024-01-10')
        }
      ],
      blockedKeywords: ['垃圾', '广告', '推广'],
      settings: {
        autoBlockLowQuality: true,
        blockSensitiveContent: true,
        blockAds: true,
        blockDuplicateContent: false
      },
      blockHistory: {
        totalBlocked: 156,
        thisWeek: 12,
        thisMonth: 45
      },
      defaultSettings: {}
    }
  },
  mounted() {
    this.loadSettings();
  },
  methods: {
    loadSettings() {
      // 从本地存储加载设置
      const savedSettings = localStorage.getItem('blockSettings');
      if (savedSettings) {
        this.settings = { ...this.settings, ...JSON.parse(savedSettings) };
      }
      
      const savedKeywords = localStorage.getItem('blockedKeywords');
      if (savedKeywords) {
        this.blockedKeywords = JSON.parse(savedKeywords);
      }
      
      this.defaultSettings = { ...this.settings };
    },
    searchUsers() {
      if (!this.searchUser.trim()) {
        this.$message?.warning('请输入搜索关键词');
        return;
      }
      
      console.log('搜索用户:', this.searchUser);
      // 这里应该调用API搜索用户
      this.$message?.info('搜索功能开发中...');
    },
    refreshBlockedUsers() {
      console.log('刷新屏蔽用户列表');
      // 这里应该调用API刷新列表
      this.$message?.success('列表已刷新');
    },
    unblockUser(userId) {
      this.blockedUsers = this.blockedUsers.filter(user => user.id !== userId);
      console.log('取消屏蔽用户:', userId);
      this.$message?.success('已取消屏蔽该用户');
    },
    addKeyword() {
      const keyword = this.newKeyword.trim();
      if (!keyword) {
        this.$message?.warning('请输入关键词');
        return;
      }
      
      if (this.blockedKeywords.includes(keyword)) {
        this.$message?.warning('该关键词已存在');
        return;
      }
      
      this.blockedKeywords.push(keyword);
      this.newKeyword = '';
      this.saveKeywords();
      this.$message?.success('关键词添加成功');
    },
    removeKeyword(index) {
      this.blockedKeywords.splice(index, 1);
      this.saveKeywords();
      this.$message?.success('关键词删除成功');
    },
    saveKeywords() {
      localStorage.setItem('blockedKeywords', JSON.stringify(this.blockedKeywords));
    },
    exportBlockList() {
      const data = {
        blockedUsers: this.blockedUsers,
        blockedKeywords: this.blockedKeywords,
        settings: this.settings,
        exportTime: new Date().toISOString()
      };
      
      const blob = new Blob([JSON.stringify(data, null, 2)], { type: 'application/json' });
      const url = URL.createObjectURL(blob);
      const a = document.createElement('a');
      a.href = url;
      a.download = `block-list-${new Date().toISOString().split('T')[0]}.json`;
      a.click();
      URL.revokeObjectURL(url);
      
      this.$message?.success('屏蔽列表导出成功');
    },
    clearAllBlocks() {
      if (confirm('确定要清空所有屏蔽设置吗？此操作不可恢复。')) {
        this.blockedUsers = [];
        this.blockedKeywords = [];
        this.saveKeywords();
        this.$message?.success('已清空所有屏蔽设置');
      }
    },
    saveSettings() {
      localStorage.setItem('blockSettings', JSON.stringify(this.settings));
      console.log('保存屏蔽设置:', this.settings);
      this.$message?.success('屏蔽设置保存成功');
    },
    resetSettings() {
      this.settings = { ...this.defaultSettings };
      localStorage.removeItem('blockSettings');
      this.$message?.info('已恢复默认设置');
    },
    formatDate(date) {
      return new Date(date).toLocaleDateString('zh-CN');
    }
  }
}
</script>

<style scoped>
.block-settings {
  min-height: 100vh;
  background-color: #f5f5f5;
}

.main-layout {
  display: flex;
  min-height: calc(100vh - 60px);
}

.settings-sidebar {
  width: 250px;
  background: white;
  border-right: 1px solid #e0e0e0;
  padding: 20px 0;
}

.sidebar-header {
  padding: 0 20px 20px;
  border-bottom: 1px solid #e0e0e0;
}

.sidebar-header h3 {
  margin: 0;
  color: #333;
  font-size: 18px;
  font-weight: 600;
}

.settings-nav {
  list-style: none;
  padding: 0;
  margin: 20px 0 0;
}

.nav-item {
  margin: 0;
}

.nav-link {
  display: flex;
  align-items: center;
  padding: 12px 20px;
  color: #666;
  text-decoration: none;
  transition: all 0.2s;
}

.nav-link:hover {
  background-color: #f8f9fa;
  color: #007bff;
}

.nav-item.active .nav-link {
  background-color: #e3f2fd;
  color: #1976d2;
  border-right: 3px solid #1976d2;
}

.nav-icon {
  margin-right: 10px;
  font-size: 16px;
}

.settings-content {
  flex: 1;
  padding: 30px;
  background: white;
  margin: 20px;
  border-radius: 8px;
  box-shadow: 0 2px 4px rgba(0,0,0,0.1);
  max-width: 800px;
}

.settings-header {
  margin-bottom: 30px;
  padding-bottom: 20px;
  border-bottom: 1px solid #e5e5e5;
}

.settings-header h2 {
  margin: 0 0 8px 0;
  font-size: 24px;
  color: #333;
}

.settings-header p {
  margin: 0;
  color: #666;
  font-size: 14px;
}

.form-section {
  margin-bottom: 30px;
  padding: 20px;
  background: #f9f9f9;
  border-radius: 8px;
}

.form-section h3 {
  margin: 0 0 20px 0;
  font-size: 18px;
  color: #333;
}

.search-section {
  margin-bottom: 20px;
}

.search-input {
  display: flex;
  gap: 8px;
}

.search-input input {
  flex: 1;
  padding: 8px 12px;
  border: 1px solid #ddd;
  border-radius: 4px;
  font-size: 14px;
}

.btn-search {
  padding: 8px 16px;
  background-color: #007bff;
  color: white;
  border: none;
  border-radius: 4px;
  cursor: pointer;
  font-size: 14px;
}

.btn-search:hover {
  background-color: #0056b3;
}

.blocked-list {
  border: 1px solid #e5e5e5;
  border-radius: 4px;
  background: white;
}

.list-header {
  display: flex;
  justify-content: space-between;
  align-items: center;
  padding: 12px 16px;
  background: #f8f9fa;
  border-bottom: 1px solid #e5e5e5;
  font-weight: 500;
}

.btn-link {
  background: none;
  border: none;
  color: #007bff;
  text-decoration: underline;
  cursor: pointer;
  font-size: 14px;
}

.btn-link:hover {
  color: #0056b3;
}

.empty-state {
  padding: 40px;
  text-align: center;
  color: #666;
}

.user-list {
  max-height: 300px;
  overflow-y: auto;
}

.user-item {
  display: flex;
  justify-content: space-between;
  align-items: center;
  padding: 16px;
  border-bottom: 1px solid #e5e5e5;
}

.user-item:last-child {
  border-bottom: none;
}

.user-info {
  display: flex;
  align-items: center;
  gap: 12px;
}

.user-avatar {
  width: 40px;
  height: 40px;
  border-radius: 50%;
  object-fit: cover;
}

.user-details {
  display: flex;
  flex-direction: column;
  gap: 2px;
}

.user-name {
  font-weight: 500;
  color: #333;
}

.user-id {
  color: #666;
  font-size: 14px;
}

.block-time {
  color: #999;
  font-size: 12px;
}

.btn-unblock {
  padding: 6px 12px;
  background-color: #28a745;
  color: white;
  border: none;
  border-radius: 4px;
  cursor: pointer;
  font-size: 12px;
}

.btn-unblock:hover {
  background-color: #218838;
}

.keyword-input {
  display: flex;
  gap: 8px;
  margin-bottom: 16px;
}

.keyword-input input {
  flex: 1;
  padding: 8px 12px;
  border: 1px solid #ddd;
  border-radius: 4px;
  font-size: 14px;
}

.btn-add {
  padding: 8px 16px;
  background-color: #28a745;
  color: white;
  border: none;
  border-radius: 4px;
  cursor: pointer;
  font-size: 14px;
}

.btn-add:hover {
  background-color: #218838;
}

.keyword-list {
  border: 1px solid #e5e5e5;
  border-radius: 4px;
  background: white;
}

.keyword-tags {
  padding: 16px;
  display: flex;
  flex-wrap: wrap;
  gap: 8px;
}

.keyword-tag {
  display: flex;
  align-items: center;
  gap: 6px;
  padding: 4px 8px;
  background-color: #e9ecef;
  border-radius: 16px;
  font-size: 14px;
}

.btn-remove {
  background: none;
  border: none;
  color: #dc3545;
  cursor: pointer;
  font-size: 16px;
  line-height: 1;
  padding: 0;
  width: 16px;
  height: 16px;
  display: flex;
  align-items: center;
  justify-content: center;
}

.btn-remove:hover {
  background-color: #dc3545;
  color: white;
  border-radius: 50%;
}

.setting-item {
  display: flex;
  justify-content: space-between;
  align-items: flex-start;
  padding: 16px 0;
  border-bottom: 1px solid #e5e5e5;
}

.setting-item:last-child {
  border-bottom: none;
}

.setting-info {
  flex: 1;
  margin-right: 20px;
}

.setting-info label {
  display: block;
  font-weight: 500;
  color: #333;
  margin-bottom: 4px;
}

.setting-info p {
  margin: 0;
  color: #666;
  font-size: 14px;
  line-height: 1.4;
}

.switch {
  position: relative;
  display: inline-block;
  width: 50px;
  height: 24px;
  flex-shrink: 0;
}

.switch input {
  opacity: 0;
  width: 0;
  height: 0;
}

.slider {
  position: absolute;
  cursor: pointer;
  top: 0;
  left: 0;
  right: 0;
  bottom: 0;
  background-color: #ccc;
  transition: 0.3s;
  border-radius: 24px;
}

.slider:before {
  position: absolute;
  content: "";
  height: 18px;
  width: 18px;
  left: 3px;
  bottom: 3px;
  background-color: white;
  transition: 0.3s;
  border-radius: 50%;
}

input:checked + .slider {
  background-color: #007bff;
}

input:checked + .slider:before {
  transform: translateX(26px);
}

.history-stats {
  display: flex;
  gap: 20px;
  margin-bottom: 20px;
}

.stat-item {
  text-align: center;
  padding: 16px;
  background: white;
  border-radius: 8px;
  border: 1px solid #e5e5e5;
  flex: 1;
}

.stat-number {
  font-size: 24px;
  font-weight: bold;
  color: #007bff;
  margin-bottom: 4px;
}

.stat-label {
  font-size: 14px;
  color: #666;
}

.history-actions {
  display: flex;
  gap: 12px;
}

.form-actions {
  display: flex;
  gap: 12px;
  padding-top: 20px;
  border-top: 1px solid #e5e5e5;
}

.btn-primary,
.btn-secondary,
.btn-danger {
  padding: 10px 20px;
  border: none;
  border-radius: 4px;
  font-size: 14px;
  cursor: pointer;
  transition: background-color 0.3s;
}

.btn-primary {
  background-color: #007bff;
  color: white;
}

.btn-primary:hover {
  background-color: #0056b3;
}

.btn-secondary {
  background-color: #6c757d;
  color: white;
}

.btn-secondary:hover {
  background-color: #545b62;
}

.btn-danger {
  background-color: #dc3545;
  color: white;
}

.btn-danger:hover {
  background-color: #c82333;
}
</style>